<template>
  <!-- 订单评论审核 -->
  <div class="orderReview">

    <!-- 关键字 -->
    <el-input v-model="queryForm.content" placeholder="请输入关键字" clearable />

    <!-- 订单编号 -->
    <el-input v-model="queryForm.orderId" placeholder="请输入订单编号" clearable />

    <!-- 状态 -->
    <el-select v-model="queryForm.status" clearable placeholder="请选择状态">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>

    <!-- 查询 -->
    <el-button type="primary" @click="orPageQuery">查询</el-button>

    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="content" label="评论内容" />
      <el-table-column prop="customerId" label="顾客编号" />
      <el-table-column prop="orderId" label="订单编号" />
      <el-table-column prop="commentTime" label="评论时间" />
      <el-table-column prop="status" label="评论状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '未审核' ? 'info' : (scope.row.status === '通过' ? 'success' : 'danger')" disable-transitions>{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">

        <template v-if="scope.row.status!=null" slot-scope="scope">
          <el-link type="warning" :underline="false" @click="ordeleteById(scope.row.id)">删除</el-link>
          <span v-show="scope.row.status == null ? false : (scope.row.status == '未审核')">
            <el-link type="primary" :underline="false" @click="orCheckPass(scope.row.id)">通过</el-link>
            <el-link type="danger" :underline="false" @click="orCheckNoPass(scope.row.id)">不通过</el-link>
          </span>

        </template>

      </el-table-column>

    </el-table>

    <!-- 分页查询 -->
    <el-pagination :current-page="queryForm.page" :page-sizes="[2, 5, 10, 15,20]" :page-size="queryForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  </div>
</template>

<script>
import { pageQuery, deleteById, checkPass, checkNoPass } from '../../../api/examine/orderComment'

export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      options: [{ // 状态下拉框
        value: '未审核',
        label: '未审核'
      }, {
        value: '通过',
        label: '通过'
      }, {
        value: '不通过',
        label: '不通过'
      }],
      value: '',
      queryForm: {
        page: 1,
        pageSize: 10,
        status: '', // 状态值
        content: '', // 关键字
        orderId: '' // 订单编号
      },
      total: 0,
      batchArr: []
    }
  },
  computed: {},
  created() {
    this.orPageQuery()
  },
  mounted() { },
  methods: {

    /**
       * 根据id删除
       */
    async ordeleteById(id) {
      const data = await deleteById(id)
      if (data.status == 200 || data.status == '200') {
        this.$message.success(data.message)
        this.orPageQuery()
      } else this.$message.error(data.message)
    },

    /**
       * 审核通过
       */
    async orCheckPass(id) {
      const { status, message } = await checkPass(id)
      if (status == 200 || status == '200') {
        this.orPageQuery()
        this.$message.success(message)
      } else {
        this.$message.error(message)
      }
    },
    /**
       * 审核不通过
       */
    async orCheckNoPass(id) {
      const { status, message } = await checkNoPass(id)
      if (status == 200 || status == '200') {
        this.orPageQuery()
        this.$message.success(message)
      } else {
        this.$message.error(message)
      }
    },

    /**
       * 条件查询
       */
    async orPageQuery() {
      for (const key in this.queryForm) {
        if (this.queryForm[key] == null || this.queryForm[key] == '') this.queryForm[key] = null
      }

      const { data } = await pageQuery(this.queryForm)
      this.total = data.total
      this.tableData = data.list
    },

    /**
       * 分页相关方法
       */
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.orPageQuery()
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.orPageQuery()
    }

  }
}
</script>
<style scoped>
  .el-input,
  .el-button,
  .el-select {
    float: left;
    margin: 0 10px;
  }
  .el-input {
    width: 200px;
  }
  .el-pagination {
    float: right;
    margin: 10px;
  }
</style>
